<template>
  <el-container class="f-container">
    <el-image src="http://127.0.0.1:81/apply/qrcode/createImage" style="width: 100px;height: 100px;"></el-image>
    <el-header class="f-header" ref="fHeader">
      <el-row type="flex" justify="center" align="middle">
        <el-col :span="bodyspan">
          <el-row type="flex" justify="space-between"  align="middle" class="f-header-top">
            <el-col :span="6"><FLogo/></el-col>
            <el-col :span="18" >
              <el-row type="flex" justify="end" align="middle">
                <el-col :span="4" :pull="1">
                  <el-input placeholder="搜索" suffix-icon="el-icon-search"></el-input>
                </el-col>
                <el-button type="text" class="f-header-login">登录</el-button>
                <el-button type="danger">注册</el-button>
              </el-row>
            </el-col>
          </el-row>
          <el-menu mode="horizontal"
                   :unique-opened="false"
                   background-color="#FFFFFF"
                   active-text-color="#008659"
                   :collapse-transition="true"
                   class="f-menu"
          >
            <FSidebar v-for="(menu, index) in permission_routes" :key="'menu' + index" :item="menu"
                      :basePath="menu.path"></FSidebar>
          </el-menu>
        </el-col>
      </el-row>
    </el-header>
    <el-carousel ref="fCarousel" :height="carouselheight+'px'" trigger="click" direction="vertical" :loop="false" :autoplay="false" @wheel.native.prevent="handleScroll">
      <el-carousel-item  :key="1" class="f-carousel-item f-bg-green">
        <el-row type="flex" justify="center">
          <el-col :span="bodyspan" class="f-carousel-item-body">
            <el-row type="flex" justify="space-between">
              <el-col :span="11">
                <FBox :key="1" :height="carouselheight" :backgroundImage="items[0].backgroundImage" :subCount="30" title="种慢病" subTitle="药管家" btnTitle="慢性病管理云平台"></FBox>
              </el-col>

              <el-col :span="11" >
                <FBox :key="2" :height="carouselheight" :backgroundImage="items[1].backgroundImage" justify="center" textAlign="center" title="HIS/LIS PACS 基层公共卫生 " subTitle="医院信息化建设" btnTitle="远程医疗   乡镇卫生院和社区卫生服务中心"></FBox>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="bodyspan" class="f-carousel-item-body">
            <el-row type="flex" justify="space-between">
              <el-col :span="11" >
                <FBox :key="3" :height="carouselheight" :backgroundImage="items[2].backgroundImage" justify="center" textAlign="center" title="医疗健康 " subTitle="大数据平台" btnTitle="县级全民健康信息平台   数据与集成交换平台"></FBox>
              </el-col>

              <el-col :span="11" >
                <FBox :key="4" :height="carouselheight" :backgroundImage="items[3].backgroundImage" subTitle="智能药房" btnTitle="智能药房   智能自助药店"></FBox>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item  :key="5" class="f-carousel-item f-bg-blue">
        <el-row type="flex" justify="center">
          <el-col :span="bodyspan" class="f-carousel-item-body">
            <el-row type="flex"  justify="space-around" >
              <el-col :span="10">
                <el-row type="flex" align="center" justify="center">
                  <el-col :span="10" :style="{textAlign: 'center'}"  ref="fImgIcon">
                    <el-image src="http://www.flowcloud.cn/images/bg3_item_bg1.png" ></el-image>
                  </el-col>
                </el-row>
                <el-card shadow="always " class="f-carousel-item-card-body" :style="{marginTop: ( imgIconHeight/2*-1 )+ 'px'}"
                         :body-style="{ 'padding': '0px' ,'minHeight': (carouselheight-40*2-imgIconHeight) + 'px' }">
                  <el-row type="flex" align="center">
                    <el-col :span="24"  :style="{textAlign: 'center', marginTop: imgIconHeight/2 + 'px', fontSize: '40px', fontWeight: 'bold'}">
                      <span>产品咨询</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" align="center">
                    <el-col :span="24"  :style="{textAlign: 'center', fontSize: '20px', fontWeight: 'bold'}">
                      <span>Product consultation</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" align="middle" justify="space-around" :style="{ marginTop: '40px'}">
                    <el-col :span="10"  :style="{textAlign: 'center', fontSize: '20px', fontWeight: 'bold'}">
                      <p>张经理</p>
                      <p :style="{ fontSize: '12px' }">jingli zhang</p>
                    </el-col>
                    <el-col :span="10"  :style="{textAlign: 'center', fontSize: '20px', fontWeight: 'bold'}">
                      <el-row type="flex" align="middle" justify="space-around">
                        <el-col :span="4"  :style="{textAlign: 'center', fontSize: '20px', fontWeight: 'bold'}">
                          <el-image src="http://www.flowcloud.cn/images/tel.png"></el-image>
                        </el-col>
                        <el-col :span="20" :style="{textAlign: 'center', fontSize: '20px', fontWeight: 'bold'}">
                          <span>+86 15110092291</span>
                        </el-col>
                      </el-row>
                      <el-row type="flex" align="middle" justify="space-around" :style="{ marginTop: '40px'}">
                        <el-col :span="4"  :style="{textAlign: 'center', fontSize: '20px', fontWeight: 'bold'}">
                          <el-image src="http://www.flowcloud.cn/images/email.png"></el-image>
                        </el-col>
                        <el-col :span="20" :style="{textAlign: 'center', fontSize: '20px', fontWeight: 'bold'}">
                          <span>zyw@jjc12320.cn</span>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>

              <el-col :span="10">
                <el-row type="flex" align="center" justify="center">
                  <el-col :span="10" :style="{textAlign: 'center'}"  ref="fImgIcon">
                    <el-image src="http://www.flowcloud.cn/images/bg3_item_bg2.png" ></el-image>
                  </el-col>
                </el-row>
                <el-card shadow="always " class="f-carousel-item-card-body" :style="{marginTop: ( imgIconHeight/2*-1 )+ 'px'}"
                         :body-style="{ 'padding': '0px' ,'minHeight': (carouselheight-40*2-imgIconHeight) + 'px' }">
                  <el-row type="flex" align="center">
                    <el-col :span="24"  :style="{textAlign: 'center', marginTop: imgIconHeight/2 + 'px', fontSize: '40px', fontWeight: 'bold'}">
                      <span>技术支持</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" align="center">
                    <el-col :span="24"  :style="{textAlign: 'center', fontSize: '20px', fontWeight: 'bold'}">
                      <span>Technical support</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" align="middle" justify="space-around" :style="{ marginTop: '40px'}">
                    <el-col :span="10"  :style="{textAlign: 'center', fontSize: '20px', fontWeight: 'bold'}">
                      <p>翟总监</p>
                      <p :style="{ fontSize: '12px' }">Zongjian Zhai</p>
                    </el-col>
                    <el-col :span="10"  :style="{textAlign: 'center', fontSize: '20px', fontWeight: 'bold'}">
                      <el-row type="flex" align="middle" justify="space-around">
                        <el-col :span="4"  :style="{textAlign: 'center', fontSize: '20px', fontWeight: 'bold'}">
                          <el-image src="http://www.flowcloud.cn/images/tel.png"></el-image>
                        </el-col>
                        <el-col :span="20" :style="{textAlign: 'center', fontSize: '20px', fontWeight: 'bold'}">
                          <span>+86 13501365035</span>
                        </el-col>
                      </el-row>
                      <el-row type="flex" align="middle" justify="space-around" :style="{ marginTop: '40px'}">
                        <el-col :span="4"  :style="{textAlign: 'center', fontSize: '20px', fontWeight: 'bold'}">
                          <el-image src="http://www.flowcloud.cn/images/email.png"></el-image>
                        </el-col>
                        <el-col :span="20" :style="{textAlign: 'center', fontSize: '20px', fontWeight: 'bold'}">
                          <span>zj@jjc12320.cn</span>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item  :key="6" class="f-carousel-item f-bg-blue">
        <el-row type="flex" justify="center">
          <el-col :span="bodyspan-5" class="f-carousel-item-body">
            <video-player  class="video-player vjs-custom-skin"
                           ref="videoPlayer"
                           :playsinline="true"
                           :options="playerOptions"
            ></video-player>
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </el-container>
</template>

<script>
import FSidebar from '@/components/f-sidebar/f-sidebar'
import FLogo from '@/components/f-logo/f-logo'
import FBox from './components/f-box'
import {mapGetters} from 'vuex'

export default {
  data () {
    return {
      handleScrollSize: 0,
      bodyspan: 20,
      carouselheight: 200,
      imgIconHeight: 80,
      items: [
        {backgroundImage: 'http://www.flowcloud.cn/images/bg2_item_bg1.png'},
        {backgroundImage: 'http://www.flowcloud.cn/images/bg2_item_bg2.png'},
        {backgroundImage: 'http://www.flowcloud.cn/images/bg2_item_bg3.png'},
        {backgroundImage: 'http://www.flowcloud.cn/images/bg2_item_bg4.png'}
      ],
      // 视频播放
      playerOptions: {
        playbackRates: [ 0.5, 1.0, 1.5, 2.0 ], // 可选择的播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [ {
          type: '',
          src: 'https://www.w3school.com.cn/i/movie.ogg'// url地址
        } ],
        poster: '', // 你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 全屏按钮
        }
      }
    }
  },
  components: {
    FSidebar,
    FLogo,
    FBox
  },
  created () {
  },
  mounted () {
    this.$nextTick(() => {
      this.carouselheight = window.innerHeight - this.$refs.fHeader.$el.offsetHeight
      this.imgIconHeight = this.$refs.fImgIcon.$el.clientWidth
      console.log(this.imgIconHeight)
    })
  },
  computed: {
    ...mapGetters([
      'permission_routes'
    ])
  },
  methods: {
    handleScroll (e) {
      let size = 7
      if (e.wheelDelta) { // 判断浏览器IE，谷歌滑轮事件
        if (e.wheelDelta > 0) { // 当滑轮向上滚动时
          this.handleScrollSize++
          if (this.handleScrollSize % size === 0) {
            this.handleScrollSize = 0
            this.$refs.fCarousel.prev()
          }
        }
        if (e.wheelDelta < 0) { // 当滑轮向下滚动时
          this.handleScrollSize--
          if (this.handleScrollSize % size === 0) {
            this.handleScrollSize = 0
            this.$refs.fCarousel.next()
          }
        }
      } else if (e.detail) { // Firefox滑轮事件
        if (e.detail > 0) { // 当滑轮向下滚动时
          this.handleScrollSize++
          if (this.handleScrollSize % size === 0) {
            this.handleScrollSize = 0
            this.$refs.fCarousel.prev()
          }
        }
        if (e.detail < 0) { // 当滑轮向上滚动时
          this.handleScrollSize--
          if (this.handleScrollSize % size === 0) {
            this.handleScrollSize = 0
            this.$refs.fCarousel.next()
          }
        }
      }
    }
  }
}
</script>

<style scoped>
  .f-header {
    height: 100% !important;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    z-index: 9;
  }
  .f-header .f-logo{
    text-align: left !important;
  }
  .f-header .f-header-top {
    padding: 10px 0px;
  }
  .f-header .f-header-login{
    color: #F56C6C;
  }
  .f-header .f-menu.el-menu--horizontal{
    border-bottom: none !important;
  }
  .f-bg-green{
    background-color: #E1f3ee;
  }
  .f-bg-blue{
    background-color: #638FC1;
    background-image: url('http://www.flowcloud.cn/images/index_bg3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .f-carousel-item-body{
    margin: 40px 0px;
  }
  .f-bg-blue .f-carousel-item-card-body{
    background-color: rgba(156,177,201, 0.5);
    border: none
  }

</style>
